Порталы React: мастерское создание модальных окон и всплывающих подсказок для улучшения UX

В современной веб-разработке создание интуитивно понятных и привлекательных пользовательских интерфейсов имеет первостепенное значение. React, популярная библиотека JavaScript для создания пользовательских интерфейсов, предоставляет различные инструменты и методы для достижения этой цели. Одним из таких мощных инструментов являются порталы React. В этой статье мы погрузимся в мир порталов React, сосредоточившись на их применении для создания доступных и визуально привлекательных модальных окон и всплывающих подсказок.

Что такое порталы React?

Порталы React предлагают способ рендерить дочерние элементы компонента в узел DOM, который находится вне иерархии DOM родительского компонента. Проще говоря, это позволяет вам вырваться из стандартного дерева компонентов React и вставлять элементы непосредственно в другую часть структуры HTML. Это особенно полезно в ситуациях, когда вам нужно контролировать контекст наложения или позиционировать элементы за пределами их родительского контейнера.

Традиционно компоненты React рендерятся как дочерние элементы своих родительских компонентов в DOM. Иногда это может приводить к проблемам со стилизацией и компоновкой, особенно при работе с такими элементами, как модальные окна или всплывающие подсказки, которые должны появляться поверх другого контента или позиционироваться относительно области просмотра. Порталы React решают эту проблему, позволяя рендерить эти элементы непосредственно в другую часть дерева DOM, обходя эти ограничения.

Зачем использовать порталы React?

Несколько ключевых преимуществ делают порталы React ценным инструментом в вашем арсенале разработчика React:

• Улучшенная стилизация и компоновка: Порталы позволяют позиционировать элементы за пределами контейнера их родителя, решая проблемы со стилизацией, вызванные overflow: hidden, ограничениями z-index или сложными компоновочными ограничениями. Представьте себе модальное окно, которое должно покрывать весь экран, даже если у его родительского контейнера установлено overflow: hidden. Порталы позволяют рендерить модальное окно непосредственно в body, обходя это ограничение.
• Повышенная доступность: Порталы имеют решающее значение для доступности, особенно при работе с модальными окнами. Рендеринг содержимого модального окна непосредственно в body позволяет легко управлять захватом фокуса, гарантируя, что пользователи, использующие скринридеры или навигацию с клавиатуры, остаются внутри модального окна, пока оно открыто. Это необходимо для обеспечения бесшовного и доступного пользовательского опыта.
• Более чистая структура компонентов: Рендеря содержимое модального окна или всплывающей подсказки вне основного дерева компонентов, вы можете сделать структуру ваших компонентов более чистой и управляемой. Такое разделение ответственности может сделать ваш код более легким для чтения, понимания и поддержки.
• Избежание проблем с контекстом наложения: Управлять контекстами наложения в CSS бывает общеизвестно сложно. Порталы помогают избежать этих проблем, позволяя рендерить элементы непосредственно в корень DOM, обеспечивая их правильное позиционирование относительно других элементов на странице.

Реализация модальных окон с помощью порталов React

Модальные окна — это распространённый шаблон пользовательского интерфейса, используемый для отображения важной информации или запроса ввода от пользователя. Давайте рассмотрим, как создать модальное окно с помощью порталов React.

1. Создание корневого элемента портала

Сначала вам нужно создать узел DOM, в который будет рендериться модальное окно. Обычно это делается путем добавления элемента div с определенным ID в ваш HTML-файл (обычно в body):

            <div id="modal-root"></div>
            

              
                Copy
              
            
          

2. Создание компонента модального окна

Далее создайте компонент React, который представляет модальное окно. Этот компонент будет содержать контент и логику модального окна.

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

Объяснение:

• Свойство isOpen: Определяет, видимо ли модальное окно.
• Свойство onClose: Функция для закрытия модального окна.
• Свойство children: Содержимое, которое будет отображаться внутри модального окна.
• modalRoot ref: Ссылается на узел DOM, в который будет рендериться модальное окно (#modal-root).
• Хук useEffect: Гарантирует, что модальное окно рендерится только после монтирования компонента, чтобы избежать проблем с недоступностью корневого элемента портала.
• ReactDOM.createPortal: Это ключ к использованию порталов React. Он принимает два аргумента: элемент React для рендеринга (modalContent) и узел DOM, в который он должен быть отрендерен (modalRoot.current).
• Клик по оверлею: Закрывает модальное окно. Мы используем e.stopPropagation() на div modal-content, чтобы предотвратить закрытие модального окна при клике внутри него.

3. Использование компонента модального окна

Теперь вы можете использовать компонент Modal в вашем приложении:

            import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
      </Modal>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

Этот пример демонстрирует, как управлять видимостью модального окна с помощью свойства isOpen и функций openModal и closeModal. Содержимое внутри тегов <Modal> будет отрендерено внутри модального окна.

4. Стилизация модального окна

Добавьте CSS-стили для позиционирования и оформления модального окна. Вот базовый пример:

            .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's on top of other content */
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

            

              
                Copy
              
            
          

Объяснение CSS:

• position: fixed: Гарантирует, что модальное окно покрывает всю область просмотра, независимо от прокрутки.
• background-color: rgba(0, 0, 0, 0.5): Создает полупрозрачный оверлей за модальным окном.
• display: flex, justify-content: center, align-items: center: Центрирует модальное окно по горизонтали и вертикали.
• z-index: 1000: Гарантирует, что модальное окно рендерится поверх всех остальных элементов на странице.

5. Вопросы доступности для модальных окон

Доступность имеет решающее значение при реализации модальных окон. Вот несколько ключевых моментов:

• Управление фокусом: При открытии модального окна фокус должен автоматически перемещаться на элемент внутри него (например, на первое поле ввода или кнопку закрытия). При закрытии модального окна фокус должен возвращаться к элементу, который вызвал его открытие. Это часто достигается с помощью хука useRef в React для хранения ранее сфокусированного элемента.
• Навигация с клавиатуры: Убедитесь, что пользователи могут перемещаться по модальному окну с помощью клавиатуры (клавиша Tab). Фокус должен быть «захвачен» внутри модального окна, не позволяя пользователям случайно выйти из него. В этом могут помочь библиотеки, такие как react-focus-lock.
• Атрибуты ARIA: Используйте атрибуты ARIA для предоставления семантической информации о модальном окне скринридерам. Например, используйте aria-modal="true" на контейнере модального окна и aria-label или aria-labelledby для предоставления описательной метки для модального окна.
• Механизм закрытия: Предоставьте несколько способов закрытия модального окна, например, кнопку закрытия, клик по оверлею или нажатие клавиши Escape.

Пример управления фокусом (с использованием useRef):

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));
  const firstFocusableElement = useRef(null);
  const previouslyFocusedElement = useRef(null);

  useEffect(() => {
    setMounted(true);
    if (isOpen) {
      previouslyFocusedElement.current = document.activeElement;
      if (firstFocusableElement.current) {
        firstFocusableElement.current.focus();
      }

      const handleKeyDown = (event) => {
        if (event.key === 'Escape') {
          onClose();
        }
      };

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        if (previouslyFocusedElement.current) {
          previouslyFocusedElement.current.focus();
        }
      };
    }

    return () => setMounted(false);
  }, [isOpen, onClose]);


  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <input type="text" ref={firstFocusableElement} /> <!-- First focusable element -->
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

Объяснение кода управления фокусом:

• previouslyFocusedElement.current: Хранит элемент, который был в фокусе до открытия модального окна.
• firstFocusableElement.current: Ссылается на первый фокусируемый элемент *внутри* модального окна (в данном примере, текстовое поле ввода).
• Когда модальное окно открывается (isOpen истинно):
  • Сохраняется текущий сфокусированный элемент.
  • Фокус перемещается на firstFocusableElement.current.
  • Добавляется обработчик событий для прослушивания клавиши Escape, который закрывает модальное окно.
• Когда модальное окно закрывается (функция очистки):
  • Обработчик событий клавиши Escape удаляется.
  • Фокус возвращается на элемент, который был сфокусирован ранее.

Реализация всплывающих подсказок с помощью порталов React

Всплывающие подсказки — это небольшие информационные окна, которые появляются, когда пользователь наводит курсор на элемент. Порталы React можно использовать для создания всплывающих подсказок, которые позиционируются правильно, независимо от стилизации или компоновки родительского элемента.

1. Создание корневого элемента портала (если он еще не создан)

Если вы еще не создали корневой элемент портала для модальных окон, добавьте элемент div с определенным ID в ваш HTML-файл (обычно в body):

            <div id="tooltip-root"></div>
            

              
                Copy
              
            
          

2. Создание компонента всплывающей подсказки

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Tooltip = ({ text, children, position = 'top' }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [positionStyle, setPositionStyle] = useState({});
  const [mounted, setMounted] = useState(false);

  const tooltipRoot = useRef(document.getElementById('tooltip-root'));
  const tooltipRef = useRef(null);
  const triggerRef = useRef(null);

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  const handleMouseEnter = () => {
    setIsVisible(true);
    updatePosition();
  };

  const handleMouseLeave = () => {
    setIsVisible(false);
  };

  const updatePosition = () => {
    if (!triggerRef.current || !tooltipRef.current) return;

    const triggerRect = triggerRef.current.getBoundingClientRect();
    const tooltipRect = tooltipRef.current.getBoundingClientRect();

    let top = 0;
    let left = 0;

    switch (position) {
      case 'top':
        top = triggerRect.top - tooltipRect.height - 5; // 5px spacing
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'bottom':
        top = triggerRect.bottom + 5;
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'left':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.left - tooltipRect.width - 5;
        break;
      case 'right':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.right + 5;
        break;
      default:
        break;
    }

    setPositionStyle({
      top: `${top}px`,
      left: `${left}px`,
    });
  };

  const tooltipContent = isVisible && (
    <div className="tooltip" style={positionStyle} ref={tooltipRef}>
      {text}
    </div>
  );

  return (
    <span
      ref={triggerRef}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
      {mounted && tooltipRoot.current ? ReactDOM.createPortal(tooltipContent, tooltipRoot.current) : null}
    </span>
  );
};

export default Tooltip;

            

              
                Copy
              
            
          

Объяснение:

• Свойство text: Текст для отображения во всплывающей подсказке.
• Свойство children: Элемент, который вызывает всплывающую подсказку (элемент, на который пользователь наводит курсор).
• Свойство position: Позиция всплывающей подсказки относительно вызывающего элемента ('top', 'bottom', 'left', 'right'). По умолчанию 'top'.
• Состояние isVisible: Управляет видимостью всплывающей подсказки.
• tooltipRoot ref: Ссылается на узел DOM, в который будет рендериться всплывающая подсказка (#tooltip-root).
• tooltipRef ref: Ссылается на сам элемент всплывающей подсказки, используется для расчета его размеров.
• triggerRef ref: Ссылается на элемент, который вызывает всплывающую подсказку (children).
• handleMouseEnter и handleMouseLeave: Обработчики событий наведения курсора на вызывающий элемент.
• updatePosition: Вычисляет правильную позицию всплывающей подсказки на основе свойства position и размеров вызывающего элемента и самой подсказки. Он использует getBoundingClientRect() для получения позиции и размеров элементов относительно области просмотра.
• ReactDOM.createPortal: Рендерит содержимое всплывающей подсказки в tooltipRoot.

3. Использование компонента всплывающей подсказки

            import React from 'react';
import Tooltip from './Tooltip';

const App = () => {
  return (
    <div>
      <p>
        Hover over this <Tooltip text="This is a tooltip!
With multiple lines."
position="bottom">text</Tooltip> to see a tooltip.
      </p>

      <button>
        Hover <Tooltip text="Button tooltip" position="top">here</Tooltip> for tooltip.
      </button>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

Этот пример показывает, как использовать компонент Tooltip для добавления всплывающих подсказок к тексту и кнопкам. Вы можете настроить текст и позицию всплывающей подсказки с помощью свойств text и position.

4. Стилизация всплывающей подсказки

Добавьте CSS-стили для позиционирования и оформления всплывающей подсказки. Вот базовый пример:

            .tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Dark background */
  color: white;
  padding: 5px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 1000; /* Ensure it's on top of other content */
  white-space: pre-line; /* Respect line breaks in the text prop */
}

            

              
                Copy
              
            
          

Объяснение CSS:

• position: absolute: Позиционирует всплывающую подсказку относительно tooltip-root. Функция updatePosition в компоненте React вычисляет точные значения top и left для размещения всплывающей подсказки рядом с вызывающим элементом.
• background-color: rgba(0, 0, 0, 0.8): Создает слегка прозрачный темный фон для всплывающей подсказки.
• white-space: pre-line: Это важно для сохранения переносов строк, которые вы можете включить в свойство text. Без этого текст всплывающей подсказки отображался бы на одной строке.

Глобальные аспекты и лучшие практики

При разработке приложений React для глобальной аудитории учитывайте следующие лучшие практики:

• Интернационализация (i18n): Используйте библиотеку, такую как react-i18next или FormatJS, для обработки переводов и локализации. Это позволяет легко адаптировать ваше приложение к разным языкам и регионам. Для модальных окон и всплывающих подсказок убедитесь, что текстовое содержимое правильно переведено.
• Поддержка Right-to-Left (RTL): Для языков, которые читаются справа налево (например, арабский, иврит), убедитесь, что ваши модальные окна и всплывающие подсказки отображаются корректно. Вам может потребоваться скорректировать позиционирование и стилизацию элементов для адаптации к RTL-раскладкам. Могут быть полезны логические свойства CSS (например, margin-inline-start вместо margin-left).
• Культурная чувствительность: Будьте внимательны к культурным различиям при дизайне ваших модальных окон и всплывающих подсказок. Избегайте использования изображений или символов, которые могут быть оскорбительными или неуместными в определенных культурах.
• Часовые пояса и форматы дат: Если ваши модальные окна или всплывающие подсказки отображают даты или время, убедитесь, что они отформатированы в соответствии с локалью и часовым поясом пользователя. В этом могут помочь библиотеки, такие как moment.js (хотя и устаревшая, но все еще широко используемая) или date-fns.
• Доступность для людей с различными возможностями: Придерживайтесь руководств по доступности (WCAG), чтобы ваши модальные окна и всплывающие подсказки были удобны для использования людьми с ограниченными возможностями. Это включает в себя предоставление альтернативного текста для изображений, обеспечение достаточного цветового контраста и поддержку навигации с клавиатуры.

Заключение

Порталы React — это мощный инструмент для создания гибких и доступных пользовательских интерфейсов. Понимая, как их эффективно использовать, вы можете создавать модальные окна и всплывающие подсказки, которые улучшают пользовательский опыт и совершенствуют структуру и поддерживаемость ваших приложений на React. Не забывайте уделять первоочередное внимание доступности и глобальным аспектам при разработке для разнообразной аудитории, обеспечивая инклюзивность и удобство использования ваших приложений для всех.

Для дальнейшего изучения

• Документация по порталам React
• Руководство по обеспечению доступности веб-контента (WCAG)
• react-i18next